<template>
  <div style="width:450px;height:300px" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    // 能耗趋势数据表******
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgb(5, 102, 232)",
          formatter: function(params) {
            console.log(params);
            return `<div style='padding:0.1rem 0.3rem;'>
          <p style='font-size:16px;font-weight:800'>${params[0].value}<p>
          <p style='font-size:12px;font-weight:400'>${params[0].seriesName}</p>
          <div>`;
          }
        },
        lenged: {
          data: ["KW/h"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "商品交易所支",
              "瓦房店支行",
              "铺完新区支行",
              "上海路社区支行",
              "旅顺支行"
            ],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: "rgb(29, 38, 117)",
                width: 2
              }
            },
            axisLabel: {
              fontSize: 10,
              color: "rgba(255,255,255,0.5)"
            }, // 坐标轴字体颜色
            barCategorGap: 10
          }
        ],
        yAxis: [
          {
            name: "KW/h",
            type: "value",
            nameTextStyle: {
              //y轴上方单位的颜色
              color: "rgba(255,255,255,0.5)"
            },
            axisLabel: { color: "rgba(255,255,255,0.5)" },
            splitLine: { show: false }, //去除网格线
            axisLine: {
              //y轴线的颜色以及宽度
              show: true,
              lineStyle: {
                color: "rgba(225,225,255,0.5)",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "50%",
            data: [10, 20, 40, 60, 80, 100],
            // 颜色
            itemStyle: {
              // 提供的工具函数生成渐变颜色
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "rgba(0, 180, 253,0.8)" }, // 0 起始颜色
                  { offset: 1, color: "#0061ce" } // 1 结束颜色
                ]
              )
            }
          }
        ],
        // 图表边界控制
        grid: {
          // 距离 上右下左 的距离
          top: "20%",
          right: "3%",
          bottom: "3%",
          left: "4%",
          // 是否包含文本
          containLabel: true,
          // 显示边框
          show: false,
          // 边框颜色
          borderColor: "rgba(0, 240, 255, 0.3)"
        },
        color: ["255,255,255,0.6"]
      });
    }
  }
};
</script>

<style>
</style>